<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>内容过滤选择器</title>
  <link rel="stylesheet" href="css/bootstrap.css" />
  <script src="js/jquery-1.11.3.js"></script>
  <style>
  </style>
</head>

<body>
  <div class="container">
    <h1>jQuery中的选择器——内容过滤选择器</h1>

    <button>提交订单</button>
    <button>Submit注册信息</button>
    <button>马上提交</button>
    <button>清空重填</button>

    <hr />
    <div class="alert" id="alert1">
      第一个警告框
    </div>
    <div class="alert" id="alert2">
      <span class="close">×</span>
      第一个警告框
    </div>
    <div class="alert"></div>

  </div>
  <script>
    //选择包含"提交"二字的按钮，变为绿色按钮
    $("button:contains(提交)").css("background-color", "green");

    //选中包含.close按钮的.alert元素，让它们变为红色的警告框
    $(".alert:has(.close)").css("background-color", "pink")
    //选中不包含.close按钮的.alert元素，让它们变为绿色的警告框
    $(".alert:not(:has(.close))").css("background-color", "lightGreen")

    //匹配所有不包含子元素或文本的空元素
    $("div:empty").css("box-shadow", "0 0 5px red")
    // 匹配含有子元素或者文本的元素
    console.log($(".alert:parent"));

    //属性过滤器
    console.log($("[class = close]"));
  </script>
</body>

</html>